<%@ page contentType="text/html;charset=UTF-8" %>
<%@ page import="org.apache.shiro.web.filter.authc.FormAuthenticationFilter"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="X-UA-Compatible" content="IE=9"/>
    <title>登录</title>
    <!-- styles-->


    <!-- font-icon -->
    <link type="text/css" rel="stylesheet" href="${ctxFrontStatic }/libs/font-welkin/css/iconfont.css">
    <link type="text/css" rel="stylesheet" href="${ctxFrontStatic }/css/zhuce.css" type="text/css"/>
    <!-- bootstrap-core -->
    <link type="text/css" rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap/v3.3.7/css/bootstrap.min.css">

    <!-- plugins -->
    <link type="text/css" rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-table/v1.11.0/bootstrap-table.min.css">
    <link type="text/css" rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-validator/css/bootstrapValidator.css">
    <link type="text/css" rel="stylesheet" href="${ctxFrontStatic }/libs/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">

    <link type="text/css" rel="stylesheet" href="${ctxFrontStatic }/style/welkin.css">
    <link type="text/css" rel="stylesheet" href="${ctxFrontStatic }/style/header.css">
    <link type="text/css" rel="stylesheet" href="${ctxFrontStatic }/style/app.css">
    <link type="text/css" rel="stylesheet" href="${ctxFrontStatic }/style/login.css">



    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script type="text/javascript" src="${ctxFrontStatic}/libs/html5shiv.min.js"></script>
    <script type="text/javascript" src="${ctxFrontStatic }/libs/respond.min.js"></script>

    <![endif]-->
    <style type="text/css">
        label.error{
            font-weight:normal;
            margin:0;
            width: 270px;
            height: 16px!important;
            color: orangered!important;
        }

    </style>
</head>

<body>
<div class="welkin-login">
    <div class="login">
        <div class="log-con col-sm-10 col-lg-8">
            <div class="logo2">
                <span class="login-text">
                    短信平台系统
                </span>
            </div>
            <div class="left-cont">
                <form name="form" method="post" action="${ctx}/login" id="loginForm" >
                    <input type="hidden" id="goUrl" value="${ctxFront }/view/index">
                    <div class="con-body">
                        <div class="by-con denglu">
                            <div class="log-int col-sm-24 col-md-24 col-lg-24 ">
                                <div class="log-title col-sm-24">
                                    <span class=" input-tip">登录</span>
                                    <%--<a href="#" class="pull-right input-a">注册新账号</a>--%>
                                </div>
                            </div>
                            <div class="log-int col-sm-24 col-md-24 col-lg-24 ">
                                <div class="col-sm-24 ">
                                    <input class="col-sm-23  " type="text" id="loginName" name="loginName"
                                           value="" placeholder="请输入登录名">
                                    <img class="login-img" src="/static/modules/smsfront/images/user.png"/>
                                </div>
                            </div>

                            <div class="log-int col-sm-24 col-md-24 col-lg-24">
                                <div class="col-sm-24">
                                    <input class="col-sm-23" type="password" id="loginPwd" name="loginPwd"
                                           placeholder="请输入密码">
                                    <img class="login-img" src="/static/modules/smsfront/images/password.png"/>
                                </div>
                            </div>
                            <div class="log-int col-sm-24 col-md-24 col-lg-24">
                                <div class="col-sm-24">
                                    <input type="checkbox" id="ck-rmUser" name="rememberMe" ${rememberMe ? 'checked' : ''}/>&nbsp;记住密码
                                </div>
                            </div>

                            <div class="log-int col-sm-24 col-md-24 col-lg-24 vali-code hide-code code">
                                <div class="col-sm-24">
                                    <label for="validateCode">验证码：</label>
                                    <sys:validateCode name="validateCode" inputCssStyle="margin-bottom:0;" />
                                </div>
                            </div>
                            <div class=" log-int col-sm-24 col-md-24 col-lg-24 ">
                                <div class="col-sm-24 log-btn">
                                    <input type="button" id="loginBtn" value="立即登录" class="btn btn-login form-control">
                                </div>
                            </div>
                            <div class=" log-int col-sm-24 col-md-24 col-lg-24 ">
                                <div class="col-sm-24 logError " id="messageBox">
                                    <label id="loginError" class="error">${message}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div

<!--js-->
<%--<script type="text/javascript" src="${ctxFrontStatic }/libs/jquery/v1.12.4/jquery.min.js"></script>--%>
<script type="text/javascript" src="${ctxFrontStatic }/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/jquery/1.9.1/jquery.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/js/main.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/bootstrap/v3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/bootstrap-table/v1.11.0/bootstrap-table.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/bootstrap-validator/js/bootstrapValidator.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/libs/echarts/echarts.min.js"></script>
<script type="text/javascript" src="${ctxFrontStatic }/js/navbar.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var msg = "";
        if(msg.length>0){
            alert(msg);
        }

        $("#loginBtn").click(function() {
            var result = $("#loginForm").valid();

            if(result){
                $("#loginBtn").attr("disabled","disabled");
                $("#loginBtn").val("登录中...");
                var pwd=$("#loginPwd").val();
                var loginName=$("#loginName").val();
                $.ajax({
                    type : "post",
                    url : "${ctx}/login",
                    data:{
                        username:loginName,
                        password:pwd,
                        preUrl:$("#goUrl").val()},
                    dataType : "json",
                    success : function(data) {
                        if(data.code == 0){
                            window.location.href = "${ctxFront}/view/index";
                        }else{
                            $("#loginBtn").removeAttr("disabled");
                            $("#loginBtn").val("立即登录");
                            $("#loginPwd").val("");
                            $("#loginError").html(data.message);
                            $("#messageBox").attr("style","display:block");
                            $("#loginError").attr("style","display:block");
//                            alert(data.message);
                            $('.code').removeClass("hide-code");

                        }
                    }
                });

            }else{
                return false;
            }
        });
        $("#loginForm").validate({
            rules: {
                /*loginName: {
                 required: true,
                 },*/
                loginPwd: {
                    required: true
                },
                validateCode: {remote: "${pageContext.request.contextPath}/servlet/validateCodeServlet"}
            },
            messages: {
                loginName: {
                    required: "登录名不能为空"
                },
                loginPwd: {
                    required: "密码不能为空"
                },
                validateCode: {remote: "验证码不正确", required: "请填写验证码"}
            },
            errorLabelContainer: "#messageBox",
            errorPlacement : function(error, element) {
                error.appendTo($("#loginError").parent());
            }
        });

        // 如果在框架或在对话框中，则弹出提示并跳转到首页
        if(self.frameElement && self.frameElement.tagName == "IFRAME" || $('#left').length > 0 || $('.jbox').length > 0){
            alert('未登录或登录超时。请重新登录，谢谢！');
            top.location = "${ctxFront}/view/login";
        }
    });


    $(document).keyup(function(event){
        if(event.keyCode ==13){
            $("#loginBtn").trigger("click");
        }
    });
</script>
</body>
</html>